import React, {useMemo, useState} from 'react';
import {Button, Divider,Statistic} from "antd";
import {CodeBlock} from "./code/CodeBlock";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
const containerStyle = {
    width: '200px',
    margin: '0 auto',
}

const useMemoCode = `
const UseMemoStudy = ()=>{
    const [up,setUp] = useState(0);

    const [down,setDown] = useState(0);

    //计算支持人占总人数的比例

    //useMemo计算缓存，免除重复执行函数
    let rate = useMemo(()=>{
        const total = up+down;
        let rate = 0;
        if (total > 0){
            rate  = ((up/total)*100).toFixed(2);
        }
        return rate;
    },[up,down]);




    return (
        <>
            <h2>支持人数占总人数的比例:{rate+"%"}</h2>
            <div style={containerStyle}>
                <div>
                    支持人数:{up}
                </div>
                <div>
                    反对人数:{down}
                </div>
                <Divider/>
                <Button onClick={()=>setUp(up+1)} style={{marginRight:'20px'}}>支持</Button>
                <Button onClick={()=>setDown(down+1)} type={'primary'}>反对</Button>
            </div>
        </>
    )
}   
`

export const UseMemoHooks = function () {
    const [up,setUp] = useState(0);

    const [down,setDown] = useState(0);

    //计算支持人占总人数的比例

    const total = up+down;

    let rate = 0;

    if (total > 0){
        rate  = ((up/total)*100).toFixed(2);
    }

    return (
        <>
            <h2><Statistic prefix={<ArrowUpOutlined /> } valueStyle={{ color: '#3f8600' }} title="支持人所占比例" value={rate+"%"} precision={2} /></h2>
            <div style={containerStyle}>
                <div>
                    支持人数:{up}
                </div>
                <div>
                    反对人数:{down}
                </div>
                <Divider/>
                <Button onClick={()=>setUp(up+1)} style={{marginRight:'20px'}}>支持</Button>
                <Button onClick={()=>setDown(down+1)} type={'primary'}>反对</Button>
            </div>
            <UseMemoStudy/>
            <CodeBlock language={'jsx'} code={useMemoCode}/>
        </>
    )

};

const UseMemoStudy = ()=>{
    const [up,setUp] = useState(0);

    const [down,setDown] = useState(0);

    //计算支持人占总人数的比例

    //useMemo计算缓存，免除重复执行函数
    let rate = useMemo(()=>{
        const total = up+down;
        let rate = 0;
        if (total > 0){
            rate  = ((up/total)*100).toFixed(2);
        }
        return rate;
    },[up,down]);




    return (
        <>
            <h2> <Statistic prefix={<ArrowUpOutlined /> } valueStyle={{ color: '#3f8600' }} title="支持人所占比例" value={rate+"%"} precision={2} /></h2>
            <div style={containerStyle}>
                <div>
                    支持人数:{up}
                </div>
                <div>
                    反对人数:{down}
                </div>
                <Divider/>
                <Button onClick={()=>setUp(up+1)} style={{marginRight:'20px'}}>支持</Button>
                <Button onClick={()=>setDown(down+1)} type={'primary'}>反对</Button>
            </div>
        </>
    )
}